<template>
    <view>
        <view class="search-box" :class="[fixed?'fixed':'']" :style="[{'paddingTop':statusBarHeight+'px',
          'backgroundColor': `rgba(244,244,244,${type=='discover'?'':searchIndexPacity})`

        }]">
            <!-- :style="`background-color:rgba(255,255,255,${searchIndexPacity})`" -->
            <view v-if="type =='diySearch'" class="search-content" :style="[navbarInnerStyle]">
                <image :src="$util.imgPath('xmg-logo.png')" mode="aspectFit" style="width:36px;height:36px"></image>
                <view class="search-center">
                    <input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title" v-model="searchText" @confirm="search()" disabled="true" @click="search()" :placeholderStyle="placeholderStyle" :style="{ backgroundColor: value.bgColor }" />
                    <text class="iconfont iconsousuo2" @click="search()" :style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
                </view>
                <image :src="$util.imgPath('small.png')" mode="aspectFit" style="width:28px;height:28px" @click="chatJump()"></image>
            </view>

            <view v-if="type =='discover'" class="discover-content" :style="[navbarInnerStyle]">
                <view class="search-center">
                    <input type="text" class="center-input" maxlength="50" :placeholder="value.title" @confirm="discoverSearch()" disabled="true" @click="discoverSearch()" />
                </view>
                <image v-if="isApp" :src="$util.imgPath('live_play.png')" mode="aspectFit" style="width:49px;height:38px;margin-left: 24rpx;" @click="livePlay"></image>
            </view>

        </view>
    </view>
</template>

<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync()
let menuButtonInfo = {}
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect()
// #endif
import {
	mapGetters
} from 'vuex'
// 搜索
export default {
	name: 'DiySearch',

	props: {
		value: {
			type: Object,
			default: () => {
				return {}
			}
		},
		city: {
			type: String,
			value: ''
		},
		siteId: {
			type: [Number, String],
			default: 0
		},
		redirectUrl: {
			type: [String],
			default: '/livePages/searchindex/searchindex'
		},
		type: {
			type: [String],
			default: 'diySearch'
		},
		fixed: {
			type: [Boolean],
			default: true
		}
	},
	data() {
		return {
			searchText: '',
			menuButtonInfo,
			statusBarHeight: systemInfo.statusBarHeight,
			isApp: false
		}
	},
	watch: {
		IndexPacity(val, oldVal) { // 普通的watch监听
			console.log('a: ' + val, oldVal)
		}
	},
	created() {
		if (!this.value.searchType) {
			this.value.searchType = 1
		}
	},
	methods: {
		search() {
			this.$util.redirectTo(this.redirectUrl)
		},
		chatJump() {
			this.$util.redirectTo('/chatPages/index/index')
		},
		discoverSearch() {
			this.$emit('discoverSearch')
		},
		/**
         * 在APP 环境使用
         */
		livePlay() {
			this.$sdk.showPublicContentPage()
		}
	},
	mounted() {
		// #ifdef H5
		this.isApp = this.isNativeApp()
		// #endif
		console.log(this.statusBarHeight, 'statusBarHeightstatusBarHeightstatusBarHeight')
	},
	computed: {
		...mapGetters(['searchIndexPacity']),
		// 导航栏内部盒子的样式
		navbarInnerStyle() {
			let style = {}
			// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
			// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
			// #ifdef MP
			let rightButtonWidth = menuButtonInfo.width ? menuButtonInfo.width + 'px' : '180rpx'
			style.marginRight = 'calc(' + rightButtonWidth + ' + 30rpx)'
			style.width = 'calc(100vw - ' + menuButtonInfo.width + ' - 30rpx)'
			// #endif

			// #ifdef H5
			style.padding = '20rpx 10rpx'
			// #endif

			return style
		},
		searchBox() {

		},
		borderRadius() {
			return this.value.borderType == 1 ? 10 + 'rpx' : 50 + '%'
		},
		placeholderStyle() {
			let str = ''
			if (this.value.textColor) {
				str = 'color:' + this.value.textColor
			} else {
				str = 'color: rgba(0,0,0,0)'
			}
			return str
		}
	}
}
</script>

<style lang="scss">
.fixed {
    position: fixed;
    top: 0;
    z-index: 10;
}
.search-box {
    width: 100%;
    padding: 0 10rpx;
    // #ifdef MP
    padding-bottom: 20rpx;
    // #endif

    display: flex;
    align-items: center;
    border-radius: 10rpx;
    justify-content: space-between;
    .img {
        width: 170rpx;
        height: 60rpx;
        margin-right: 20rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
}

.location {
    height: 80rpx;
    line-height: 80rpx;
    padding-right: 10rpx;
    margin-right: 16rpx;
    font-weight: 600;
}

.location .iconzuobiao {
    display: inline-block;
    margin-right: 10rpx;
    font-weight: bold;
    font-size: $font-size-toolbar;
    color: red;
}

.search-add {
    padding: 0 10rpx;
    display: flex;
    align-items: center;
    margin-right: 20rpx;
    text {
        padding: 0 5rpx;
    }
}

.search-content {
    // height: 78rpx;
    // border-radius: 40rpx;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .search-center {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        margin: 0 10px;
    }
}

.search-content input {
    box-sizing: border-box;
    display: block;
    height: 60rpx;
    width: 100%;
    padding: 0 20rpx 0 76rpx;
    color: #333333;
    background: #ffffff;
    border-radius: 8px;
}

.search-content .iconfont {
    position: absolute;
    left: 26upx;
    // top: 50%;
    // right: 40rpx;
    // transform: translateY(-50%);
    // font-size: $font-size-toolbar;
    // z-index: 10;
    // color: #89899a;
    // width: 80rpx;
    // text-align: center;
    // font-size: 30rpx;
}

.discover-content {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .search-center {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        margin: 0 10px;
        .center-input {
            background: #f4f4f4;
            flex: 1;
            font-size: 24rpx;
            padding: 0 24rpx;
            height: 70rpx;
            border-radius: 35rpx;
        }
    }
}
</style>
